import React from 'react';
import {
    Form,
    Input,
    Button,
    Toast
} from 'antd-mobile';
// 引入导航条组件
import Mynavbar from '@/components/Mynavbar';
import { doSendMessageApi } from '@/api/regist';
import { useLocation, useHistory } from 'react-router-dom'
const Step2 = () => {
    const loc = useLocation();
    // console.log('loc', loc);
    const tel = loc.state.tel
    const his = useHistory()
    const onFinish = (value) => {
        // 跳转到step3 携带手机号
        his.push({
            pathname: '/regist/step3',
            state: {
                tel
            }
        })
    }


    return (
        <div>
            <Mynavbar isshowright={false}>京东注册</Mynavbar>
            {/* 表单 */}
            <Form
                layout='horizontal'
                onFinish={onFinish}
                footer={
                    <Button block type='submit' color='primary' size='large'>
                        下一步
                    </Button>
                }
            >
                <Form.Item
                    name='tel'
                    label='短信验证码'
                    rules={[{ required: true, message: '验证码不能为空' }]}
                    extra={<Button size='small' onClick={(e) => {
                        const currentDOM = e.target
                        // console.log('currentDOM', currentDOM)
                        let count = 10
                        currentDOM.disabled = true
                        let timer = setInterval(() => {
                            count--
                            currentDOM.innerHTML = `${count}s发送验证码`
                            if (count <= 0) {
                                currentDOM.innerHTML = '发送验证码'
                                currentDOM.disabled = false
                                clearInterval(timer)
                            }
                        }, 1000)
                        doSendMessageApi({ tel }).then(res => {
                            // console.log(res);
                            Toast.show({
                                content: res.data.message,
                                duration: 1000
                            })
                        })
                    }}>发送验证码</Button>}
                >
                    <Input onChange={console.log} placeholder='请输入用户名' />


                </Form.Item>
            </Form>
        </div>
    );
}

export default Step2;
